<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.List" %>
<%@ page import="bean.Log"%>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <title>座位预约</title>
    <style>
        body{
            background-color: #f6eeea;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        table{border-spacing: 12px 20px;
            text-align: center;
            }

        .appointment_rule{
            background-color: #1989d9;
            padding: 10px 20px;
            font-size: 12px;
            border-radius: 8px;
        }
        .main{
            color: #f6f6f6;
            overflow: hidden;
        }
        .main_line{
            line-height: 10px;
            margin-left: 30px;
            float: left;
        }
    </style>




    <script>

        function datetime1() {
            let now = new Date();
            document.getElementById("time").value = now.getFullYear() + "-"
                + (now.getMonth() + 1) + "-" + now.getDate();
            document.getElementById("time").value += " " + now.getHours() + ":"
                + now.getMinutes() + ":" + now.getSeconds();
        }
        window.setInterval("datetime1()", 1000);

        window.onload = function (){
            let ojstart_time = document.getElementById("start_time");
            let ojend_time = document.getElementById("end_time");
            let ojtime_submit = document.getElementById("time_submit");
            let ojsubmit_time = document.getElementById("submit_time");
            let ojtime_form = document.getElementById("time_form");
            let time = datetime2().substring(11,16);
            if (time.substring(4)!=="0"){
                if (time.substring(3,4)!=="5"){
                    time = time.substring(0,3)+(Number(time.substring(3,4))+1).toString()+"0";
                }else {
                    time = time.substring(0,1)+(Number(time.substring(1,2))+1).toString()+"00";
                }
            }
            let m = ti_to_num(time);
            let n = 21*60+30;

            function ti_to_num (time){
                if(time != null){
               return Number(time.substring(3))+Number(time.substring(0,2))*60;;
                }else {return null;}}

            ojsubmit_time.onclick = function (){
                ojtime_submit.value = datetime2();
                document.getElementById("st_input").value = ojstart_time.onchange(undefined);
                document.getElementById("et_input").value = ojend_time.onchange(undefined);
                ojtime_form.submit();
            }

            ojstart_time.onfocus = function (){
                DeleteOptions(ojstart_time);
                if (m<n){
                    let m1 = m;
                    for(let i=n-m;i>=0;i-=10){
                        let time1;
                        if(m1/60>=10&&m1%60>=10){
                            time1 = (Math.floor(m1/60)+":"+(m1%60)).toString();
                        }else if(m1/60>=10&&m1%60<10){
                            time1 = (Math.floor(m1/60)+":0"+(m1%60)).toString();
                        }else if(m1/60<10&&m1%60>=10){
                            time1 =("0"+Math.floor(m1/60)+":"+(m1%60)).toString();
                        }else {
                            time1 = ("0"+Math.floor(m1/60)+":0"+(m1%60)).toString();
                        }
                        let opt1 = new Option(time1,time1)
                        ojstart_time.options.add(opt1);
                        m1+=10;
                    }
                    return true;
                }else {
                    let opt1 = new Option("当前时间不可预约","当前时间不可预约");
                    ojstart_time.options.add(opt1);
                    return false;
                }
            }
            ojstart_time.onchange = function (){
                console.log(document.getElementById("start_time").value)
                return document.getElementById("start_time").value;
            }

            ojend_time.onfocus = function (){
                DeleteOptions(ojend_time);
                console.log(ti_to_num(ojstart_time.onchange(undefined)))
                let time2
                let m2 = ti_to_num(ojstart_time.onchange(undefined))+60;

                // let opt = document.createElement("option");
                if (m2<n+60){
                    for(m2;m2<=n+60;m2+=10){
                        // opt.innerHTML = (Math.floor(m1/60)+":"+(m1%60)).toString();
                        if(m2/60>=10&&m2%60>=10){
                            time2 = (Math.floor(m2/60)+":"+(m2%60)).toString();
                        }else if(m2/60>=10&&m2%60<10){
                            time2 = (Math.floor(m2/60)+":0"+(m2%60)).toString();
                        }else if(m2/60<10&&m2%60>=10){
                            time2 =("0"+Math.floor(m2/60)+":"+(m2%60)).toString();
                        }else {
                            time2 = ("0"+Math.floor(m2/60)+":0"+(m2%60)).toString();
                        }
                        let opt2 = new Option(time2,time2);
                        ojend_time.options.add(opt2);
                    }
                }else {
                    let opt2 = new Option("当前时间不可预约","当前时间不可预约");
                    ojstart_time.options.add(opt2);
                }
            }
            ojend_time.onchange = function (){
                console.log(document.getElementById("end_time").value);
                return document.getElementById("end_time").value;
            }

            function DeleteOptions(objselect) {//obj
                let selectOptions = objselect.options;
                let optionLength = selectOptions.length;
                for (let i = 0; i < optionLength; i++) {
                    objselect.removeChild(selectOptions[0]);
                }
            }
            function datetime2() {
                let now = new Date();
                if(now.getMonth()+1>9){
                    document.getElementById("time").value = now.getFullYear() + "-"
                        + (now.getMonth() + 1) + "-" + now.getDate();
                }else {
                    document.getElementById("time").value = now.getFullYear() + "-0"
                        + (now.getMonth() + 1) + "-" + now.getDate();
                }
                if(now.getMinutes()>=10) {
                    if (now.getHours() >= 10) {
                        document.getElementById("time").value += " " + now.getHours() + ":"
                            + now.getMinutes() + ":" + now.getSeconds();
                    }else {
                        document.getElementById("time").value += " 0" + now.getHours() + ":"
                            + now.getMinutes() + ":" + now.getSeconds();
                    }
                }else if (now.getHours()>=10){
                    document.getElementById("time").value += " " + now.getHours() + ":0"
                        + now.getMinutes() + ":" + now.getSeconds();
                }else {
                    document.getElementById("time").value += " 0" + now.getHours() + ":0"
                        + now.getMinutes() + ":" + now.getSeconds();
                }
                return document.getElementById("time").value;
            }

        }

    </script>
</head>
<body>

        <div class="appointment_body">
            <div class="appointment_rule">
                <h3>预约规则</h3>
                <main class="main">
                    <p class="main_line" style="font-size:15px;"><span>1.当日开放： 08:00--22:30 &nbsp;&nbsp;</span></p>
                    <p class="main_line" style="font-size:15px;"><span>2.提前预约范围：当天</span></p>
                    <p class="main_line" style="font-size:15px;"><span>3.预约时长：60分--870分</span></p>
                    <p class="main_line" style="font-size:15px;"><span>4.预约成功后，在预约开始前未签到视为违约1次，预约不再保留</span></p>
                </main>
            </div>
            <%
                String seat_name = (String) request.getAttribute("seat_name");
                String person_id = (String) request.getAttribute("person_id");
                List<Log> logList = (List<Log>)request.getAttribute("logList");
            %>
            <div class="appointment_time">
                <div class="time_already">
                    <table align="center">
                        <tr><td colspan="2">
                        <span style="display:inline-block;width:200px;font-weight:bold;">
                            <%=seat_name%>以下时间段预约不可用
                        </span></td></tr>
                        <tr>
                            <td >开始时间</td>
                            <td >结束时间</td>
                        </tr>
                        <%
                            String time = request.getAttribute("time").toString().substring(0,11);
                            List<String> log_timeList = new ArrayList<>();
                            for(Log log : logList){
                                String log_time = log.getEnd_time().substring(0,11);
                                log_timeList.add(log_time);
                            }
                            for(int i =0;i<log_timeList.size();i++){
                                if(time.compareTo(log_timeList.get(i)) == 0 &&!logList.get(i).getStatus().equals("已签离")&&!logList.get(i).getStatus().equals("违约")){
                        %><tr>
                        <td class="LogStartTimes" id="<%=logList.get(i).getStart_time().substring(11,16)%>">
                                                <%=logList.get(i).getStart_time().substring(11,16)%></td>
                        <td class="LogEndTimes" id="<%=logList.get(i).getEnd_time().substring(11,16)%>">
                                            <%=logList.get(i).getEnd_time().substring(11,16)%></td>
                        <%}}%>
                    </tr>
                    </table>
                </div>
<form action="TimeCheckServlet" method="post" id="time_form" >

                <div class="time_selcet">
                    <table align="center">
                        <tr><td colspan="2">请选择您的预约时间</td></tr>
                        <tr><th>开始时间</th> <th>结束时间</th></tr>
                        <tr>
                            <td><label for="start_time"></label><select id="start_time" style="width: 60px" >
                            </select></td>
                            <td><select id="end_time" style="width: 60px">
                            </select></td>
                        </tr>
                    </table>
                </div>
    <input hidden="hidden" name="start_time" id="st_input" value="">
    <input hidden="hidden" name="end_time" id="et_input" value="">
    <input hidden="hidden" name="y_m_d" value="<%=time%>">
    <input id="time_submit" hidden="hidden" name="time_submit" />
    <input name="seat_name" hidden="hidden" value="<%=seat_name%>">
    <input name="person_id" hidden="hidden" value="<%=person_id%>">
    <div align="center"><input type="submit" id="submit_time" value="预约"></div>
</form>
                <input id="time" style="text-align: center;" disabled="disabled" />
<%--                预约记录：<%=logList%>--%>
                座位编号：<%=seat_name%>
                预约人id：<%=person_id%>
<%--                <label>--%>
<%--                    <select>--%>
<%--                        <option>8:00</option>--%>
<%--                        <option>9:00</option>--%>

<%--                    </select>--%>
<%--                </label>--%>
            </div>
        </div>


</body>
</html>
